<!DOCTYPE html>
<html lang=en>
<head>
	<!--
	
	 CSS3 Card Games Example
	 http://gamedesign.cc/html5games/css3-matching-game/
	 
	 This is an example game for my coming book.
	 
	 Copyright 2011, Thomas Seng Hin Mak
	 makzan@gmail.com
	   
	 All Right Reserved.
	 
	-->
<meta charset=utf-8 name="viewport" content="target-densitydpi=device-dpi" />  
	
	<title>CSS3 Matching Game</title>
	  <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
	<link href="http://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet" type="text/css" >
	<link rel="stylesheet" href="css/matchgame12.css" />
			
</head>
<body>




	<header>
		<h1>CSS3 Matching Game</h1>
	</header>
	

	
	
	<section id="gameStats">
			<p id="timer">
			<a id="gameQuit" class="buttonhelp" href="#">Quit</a>
		    <span class="gameScore"></span></p>
		    <p id="reset" ><a id="gamePlay3" class="buttonhelp" 	href="">Help</a></p>
		
	        <div id="timer">
	     	Player: 
	    	<span id="player-name"><script type='text/javascript'>document.getElementById('player-name').innerHTML = sessionStorage.getItem('player');</script></span>
	        </div>
	
	        <div id="timer">
		    Elapsed time: <span id="elapsed-time">00:00</span>
	        </div> 
			
	<div id="timer">
		Level: 3
	</div> 
    </section>

	
	
	<section id="game">		
		<div id="cards">			
			<div class="card">
				<div class="face front"></div>
				<div class="face back"></div>
			</div> <!-- .card -->						
		</div> <!-- #cards -->
	</section> <!-- #game -->
	
	
		<section id="popupHelp"  style="display:none">
		   
		 <div id="popup-bg"></div>
		 
		 <div id="popup-box">
           Cards are laid out in a grid face down,
		   and players take turns flipping pairs of cards over.
		   On each turn, the player will first turn one card over, 
		   then a second. If the two cards match, 
		   the player scores one point,
		   the two cards are removed from the game, 
		   and the player gets another turn. 
		   If they do not match, the cards are turned back over.

		   
    <!--  <p> <a id="gamePlay4" class="button" 	href="">OK</a></p> 
     -->    </div>
      </section> 

	  
<!-- 	
	<section id="popup" >
		   <div id="popup-bg"></div>
		   <div id="popup-box">
		   
  		    <p><a id="gamePlay1" class="button" 	href="">New</a></p>
		    <p><a id="gamePlay2" class="button" 	href="">Continue</a></p>
		
		  <p><a id="gameExit" class="button" 	href="">Exit</a></p>
		  
		  
		
		  <p><a id="gameNextLevel" class="button" 	href="">Next Level</a></p>
	  
		   </div>
	   </section>  -->
	
	
	<section id="popupOver" class="hide">
		
		<div id="popup-bg">
		</div>
		
		<div id="popup-box2">
			<div class="ribbon hide">				
				<div class="ribbon-body">
					<span>New Record</span>
				</div>			
				<div class="triangle"></div>	
			</div>		
		
		<div id="popup-box-content" class=hide">
			
    			<h1>You Won!</h1>				
				<p>Your Score:</p>
				<p><span class='score'>13</span></p>
				
		 		<p><small>Last Score: <span class='last-score'>20</span><br>
				Saved on: <span class='saved-time'>13/4/2011 3:14pm</span></small></p>
   		</div>
        
		<div>
		  <p><a id="gameExit" class="button" 	href="#">Exit</a></p>
		</div>
		  
		 <div>
		  <p><a id="gameNextLevel" class="button"  href="#">Next</a></p>
		</div>
		
		</div>
	</section>
	
<!-- 	
     <section id="popupLevel" class="hide" >
		   <div id="popup-bg"></div>
		   <div id="popup-box">
            <p><a id="gameExit" class="button" 	href="">Exit</a></p>
		    <p><a id="gameNextLevel" class="button" 	href="">Next Level</a></p>
		   </div>
	   </section> 
 -->

<script src="js/jquery-1.6.min.js"></script>
<script src="js/html5games.matchgame12.js"></script>

</body>
</html>